<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #root{
            border:1px solid red;
            height:20px;
        }
    </style>
</head>
<body>
    <div id="root"></div>
    
    <script>
        //============================================================================================================================:
        //   ====>window.onpopstate事件介绍
        //   ===:history.pushState()或history.replaceState()不会触发popstate事件
        //   ===:在支持h5的浏览器中,有一个window.onpopstate事件,该事件可以监听如下操作
        //   =======:01.点击浏览器的前进按钮和后退按钮
        //   =======:02.执行js代码history.go(n)/history.forward()/history.back()
        //   ===注意点：
        //   ===>不同浏览器在加载页面时处理popstate事件的形式存在差异,页面加载时Chrome和Safari通常会出发(emit)popstate事件，但是Fire则不会
        //   ===>需要注意的是调用history.pushState()或history.replaceState()不会触发popstate事件
        //   ===>只有在做出浏览器动作时，才会触发该事件，如用户点击浏览器的回退按钮（或者在Javascript代码中调用history.back()）
        //   ===>特别注意点:并不是只要浏览器点击前进后退按钮或者执行js代码history.go(n)/history.forward()/history.back()就能触发
        //   ============>该事件只针对同一个文档，如果浏览历史的切换，导致加载不同的文档，该事件也不会触发
        //   ===:举例子:
        //   ===:01.先访问www.baidu.com===>这时加载的是百度的首页文档
        //   ===:02.在访问www.taobao.com===>这时加载的是淘宝的的首页文档
        //   ===:03.点击浏览器的返回按钮从www.taobao.com到www.baidu.com就不会触发onpopstate事件

        //   ===:触发情况：
        //   ===:01.当前地址是:www.baidu.com
        //   ===:02.当我们使用了window.history.pushState("", "", '?id=btn2');后
        //   ===:浏览器地址为www.baidu.com？id=2
        //   ===：但是由于window.history.pushState只是使浏览器地址栏显示为 www.baidu.com？id=2，但并不会导致浏览器加载 www.baidu.com？id=2 
        //   ===:甚至不会检查www.baidu.com？id=2 是否存在,
        //   ===:所以前后两次都是www.baidu.com这个文档，但是又给浏览器的history添加了一条历史记录
        //   ===:由于前后两次的文档相同,所以点击浏览的返回按钮或者js执行history.back()等操作从www.baidu.com？id=2到www.baidu时
        //   ===:会触发onpopstate事件
        //   ==============================

        var historyObj = window.history;
        //监听路径改变事件 表示将当前的状态变更了，弹出了
        window.onpushstate = (event) => {
            console.log(event.type,event.detail.state);
            root.innerHTML = window.location.pathname;
        }
        window.addEventListener('popstate', (event) => {
            console.log(event.type,event.state);
            root.innerHTML = window.location.pathname;
        });

        (function (historyObj) {
            let oldPushState = history.pushState;//缓存原生的pushState
            historyObj.pushState = function (state, title, pathname) {
                let result = oldPushState.apply(history, arguments);
                if (typeof window.onpushstate === 'function') {
                    window.onpushstate(new CustomEvent('pushstate',{detail:{pathname,state}}));
                }
                return result;
            }
        })(historyObj);
        let oldHistoryLength = historyObj.length;
        setTimeout(() => {
            historyObj.pushState({ page: 1 }, { title: 'page1' }, '/page1');//page1
            console.log(historyObj.length-oldHistoryLength);
        }, 1000);
        setTimeout(() => {
            historyObj.pushState({ page: 2 }, { title: 'page2' }, '/page2');//page2
            console.log(historyObj.length-oldHistoryLength);
        }, 2000);
        setTimeout(() => {
            historyObj.pushState({ page: 3 }, { title: 'page3' }, '/page3');//page3
            console.log(historyObj.length-oldHistoryLength);
        }, 3000);
        setTimeout(() => {
            historyObj.back();//historyObj.go(-1);//page2
            setTimeout(()=>console.log(historyObj.length-oldHistoryLength),100);

        }, 4000);
        setTimeout(() => {
            historyObj.pushState({ page:4 }, { title: 'page4' }, '/page4');//page4
            console.log(historyObj.length-oldHistoryLength);
        }, 5000);
        setTimeout(() => {
            historyObj.go(1);
            console.log(historyObj.length-oldHistoryLength);//page4
        }, 6000);
    </script>
</body>
</html>